<template>
  <div>
    <div style="height: 50px;">
      <!-- 中间 -->
      <div class="message">
        <el-radio></el-radio>我的联络任务
      </div>
      <!-- 当前展会 -->
      <div class="exhibition">当前展会:
        <el-text v-model="state.dataForm.exhsNameStr">{{ state.dataForm.exhsNameStr }} </el-text>
        <el-text class="mx-1" type="primary" style="padding-left: 20px;cursor: pointer;" @click="handlexhibition()">切换</el-text>
        <Sort style="width: 1em; height: 1em; margin-left: 10px;transform: rotate(270deg);color:#17B3A3;margin-bottom:-2px" />
      </div>
    </div>
    <!-- 新建联系任务 -->
    <el-form-item>
      <el-button style="margin-left:23px; margin-top:10px;" v-if="state.hasPermission('crm:crmtask:save')"
        type="primary" @click="addOrUpdateHandle()">{{ $t("add") }}</el-button>
    </el-form-item>
    <!-- 我的联络任务 -->
    <el-table :header-cell-style="{ 'background': '#eef1f6', 'color': '#1f2d3d', 'border-color': '#dfe6ec' }" center
      v-loading="state.dataListLoading" :data="state.dataList" border
      @selection-change="state.dataListSelectionChangeHandle" style="width: 100%">
      <el-table-column type="selection"></el-table-column>
      <el-table-column align="center" prop="tskName" label="任务名称" width="180"></el-table-column>
      <el-table-column align="center" prop="creatorName" label="创建人" width="120"></el-table-column>
      <el-table-column align="center" prop="tskCreateTime" label="创建时间"></el-table-column>
      <el-table-column align="center" prop="pendingCount" label="待处理数量" width="150"></el-table-column>
      <el-table-column align="center" prop="totalCount" label="数量" width="180"></el-table-column>
      <el-table-column align="center" prop="finishRate" label="我的完成率" width="180"></el-table-column>
      <el-table-column :label="$t('handle')" fixed="right" header-align="center" align="center">
        <template v-slot="scope">
          <el-button  v-if="state.hasPermission('crm:crmperson:contactCenter')" type="primary"
           @click="enterCenter(scope.row.id, scope.row.tskName,state.dataForm.curExhId )">进入呼叫中心</el-button>
          <el-button v-if="state.hasPermission('crm:crmtask:update')" type="success"
            @click="addOrUpdateHandle(scope.row.id)">{{ $t("update") }}</el-button>
          <el-button v-if="state.hasPermission('crm:crmtask:delete')" type="danger"
            @click="state.deleteHandle(scope.row.id)">{{ $t("delete") }}</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination :current-page="state.page" :page-sizes="[10, 25, 50, 100]" :page-size="state.limit"
      :total="state.total" layout="total, sizes, prev, pager, next, jumper" @size-change="state.pageSizeChangeHandle"
      @current-change="state.pageCurrentChangeHandle"> </el-pagination>
    <!-- 弹窗, 新增 / 修改 -->
    <add-or-update :key="addKey" ref="addOrUpdateRef" @refreshDataList="state.getDataList"></add-or-update>
    <!-- 当前展会 -->
    <power ref="exhibitionPowerRef" @refreshDataList="getInfo" @refreshexhibitionlist="state.getDataList"></power>
  </div>
</template>
<script lang="ts" setup>
import useView from "@/hooks/useView";
import { nextTick, reactive, ref, toRefs, } from "vue";
import AddOrUpdate from "./contact-tasks-add-or-update.vue";
import baseService from "@/service/baseService";
import power from "./current-exhibition-add.vue";
import { useRouter } from 'vue-router'
const view = reactive({
  getDataListURL: '',
  getDataListIsPage: true,
  deleteURL: "/crm/crmtask",
  deleteIsBatch: true,
  dataForm: {
    id: "",
    exhsNameStr: "",
    curExhId: "",
  }
});

const init = () => {
  getInfo();
};

/**
 * 跳转到呼叫中心页面
 */
const router = useRouter();
const enterCenter = (row: any, tskName: any, curExhId:any) => {
  router.push({
    path: "/expocube/call-center",
    query: {
      id: row,
      tskName: tskName,
      curExhId: state.dataForm.curExhId,

    }
  });
};

/**
 * 获取当前登录用户信息，当前展会
 */
const getInfo = () => {
  baseService.get("/sys/user/info").then((res) => {
    if (res.data.exhsNameStr == "" || res.data.exhsNameStr == null) {
      alert("请先设置当前展会");
    }
    Object.assign(state.dataForm, res.data);
    //获取数据列表
    state.getDataListURL = "/crm/crmtask/pageByUserId";
    state.getDataList();
  });
}

/**
 * 当前展会
 */
const exhibitionPowerRef = ref();
const handlexhibition = (id?: number) => {
  nextTick(() => {
    exhibitionPowerRef.value.init(id);
  });
}

//新增
const addKey = ref(0);
const addOrUpdateRef = ref();
const addOrUpdateHandle = (id?: number) => {
  addKey.value++;
  nextTick(() => {
    addOrUpdateRef.value.init(id, state.dataForm.curExhId);
  });
};

const state = reactive({ ...useView(view), ...toRefs(view) });

//页面进入执行
init();
</script>

<style lang="scss" scoped>
.message {
  float: left;
  font-size: 16px;
  font-weight: 600;
}

.exhibition {
  font-size: 16px;
  float: right;
  padding-left: 20px;
  width: 305px;
  height: 49px;
  line-height: 49px;
  border-radius: 27px;
  background-color: rgba(247, 247, 247, 1);

}

.el-text {
  width: 200px;
  height: 200px;
  font-size: 16px;
}
.sort-icon {
  transform: rotate(180deg);
}
::v-deep .el-table .cell {
  white-space: nowrap;
}
</style>
